<template>
	<view class="page-bg">
		<view class="title">{{ titles[index] }}</view>
		<view class="scroll" v-show="index < 3">
			<template v-if="index === 0">
				<view :class="{ 'scroll-item': 'scroll-item', active: operatorIndex === index }"
					v-for="(item, index) in operatorList" :key="item" @click="changeOperatorIndex(index)">{{ item }}</view>
			</template>
			<template v-if="index === 1">
				<view :class="{ 'scroll-item': 'scroll-item', active: jobNumberIndex === index }"
					v-for="(item, index) in jobNumberList" :key="item.id" @click="jobNumberIndex = index">{{ item.value }}
				</view>
				<view v-if="jobNumberList.length === 0" style="text-align: center;">暂无工号</view>
			</template>
			<template v-if="index === 2">
				<view class="scroll-item2" v-for="(item, index) in phoneList" :key="item.id">
					<text>{{ item.phone }}</text>
					<uni-icons class="icon" type="close" size="30" @click="handleDelete(item)"></uni-icons>
				</view>
				<view v-if="phoneList.length === 0" style="text-align: center;">该工号下无历史订单</view>
			</template>
		</view>
		<view class="form" v-show="index == 3">
			<uni-forms ref="formRef" :modelValue="formData" :rules="formRules" label-width="160rpx" label-align="left">
				<uni-forms-item label="运营商" name="operator">
					<view class="register-input" :class="{ active: isActive === 1 }">
						<uni-easyinput @focus="handleFocusActive(1)" @blur="handleFocusActive(0)" :inputBorder="false"
							v-model="formData.operator" disabled :styles="styles" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="姓名" name="name">
					<view class="register-input" :class="{ active: isActive === 2 }">
						<uni-easyinput @focus="handleFocusActive(2)" @blur="handleFocusActive(0)" :inputBorder="false"
							v-model="formData.name" placeholder="请输入姓名" :clearable="false" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="新办卡号" name="phone">
					<view class="register-input" :class="{ active: isActive === 3 }">
						<uni-easyinput @focus="handleFocusActive(3)" @blur="handleFocusActive(0)" :inputBorder="false"
							v-model="formData.phone" placeholder="请输入新办卡号" :clearable="false" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="首充" name="firstRecharge">
					<view class="register-box">
						<view class="box" :class="{ active: formData.firstRecharge == 50 }" @click="formData.firstRecharge = 50">50
						</view>
						<view class="box" :class="{ active: formData.firstRecharge == 100 }" @click="formData.firstRecharge = 100">
							100
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="办理工号" name="workCode">
					<view class="register-input" :class="{ active: isActive === 4 }">
						<uni-easyinput @focus="handleFocusActive(4)" @blur="handleFocusActive(0)" :inputBorder="false"
							v-model="formData.workCode" disabled :styles="styles" />
					</view>
				</uni-forms-item>
				<view class="bottm">请详细确定信息</view>
			</uni-forms>
		</view>
		<view class="btns">
			<button v-show="index === 1" class="mini-btn" type="default" size="mini" @click="addJobNumber">添加工号</button>
		</view>
		<view class="buttons">
			<button v-show="index !== 0" class="back" @click="index--" size="mini">上一步</button>
			<button class="next" @click="goNext" size="mini">{{ index === 3 ? '提交订单' : '下一步' }}</button>
		</view>
		<view class="step">
			<uni-steps active-color="#B10D0C" :options="stepOption" :active="index" />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from "@dcloudio/uni-app"
import { createOrder, getCodeList, getSubmitHistory, addOrder, removeSubmitHistory } from '@/api/order';
const styles = {
	disableColor: "#fff",
	color: "red"
}
onShow(() => {
	changeOperatorIndex(0)
})
const index = ref(0)
const isActive = ref(0)
const titles = ref(['请选择要办理的运营商?', '请选择名下工号?', '此工号已提交订单列表', '订单信息'])
const operatorIndex = ref(0)
const operatorList = ref(['移动', '联通', '电信'])
const changeOperatorIndex = (index) => {
	operatorIndex.value = index
	getCode()
}
const jobNumberIndex = ref(-1)
const jobNumberList = ref([])
// 添加工号
const addJobNumber = () => {
	uni.showModal({
		title: '添加工号',
		editable: true,
		success: function (res) {
			const { confirm, content } = res
			if (confirm) {
				// 添加工号
				createOrder({
					operator: operatorList.value[operatorIndex.value],
					workCode: content
				}).then(res => {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					getCode()
				})
			}
		}
	})
}
const phoneList = ref([])
const formRef = ref(null)
const formData = ref({
	operator: '移动',
	name: '',
	phone: '',
	firstRecharge: 50,
	workCode: ''
})
const formRules = ref({
	operator: {
		rules: [{
			required: true,
			errorMessage: '请选择运营商',
		}]
	},
	name: {
		rules: [{
			required: true,
			errorMessage: '请输入姓名',
		}]
	},
	phone: {
		rules: [{
			required: true,
			errorMessage: '请输入手机号',
		},
		{
			minLength: 11,
			maxLength: 11,
			errorMessage: '手机号长度应 {maxLength} 位',
		}]
	},
	firstRecharge: {
		rules: [{
			required: true,
			errorMessage: '请输入首',
		}]
	},
	workCode: {
		rules: [{
			required: true,
			errorMessage: '请选择工号',
		}]
	}
})
const handleFocusActive = (value) => {
	isActive.value = value
}
const stepOption = ref([
	{
		title: '运营商'
	},
	{
		title: '工号'
	},
	{
		title: '卡号'
	},
	{
		title: '订单'
	},
])
const getCode = () => {
	jobNumberIndex.value = -1; // 重置索引
	getCodeList({
		operator: operatorList.value[operatorIndex.value]
	}).then(res => {
		jobNumberList.value = res.data.map(item => ({
			id: item.id,
			value: item.workCode
		}))
		jobNumberIndex.value = 0; // 设置新工号索引为0
	})
}
const goNext = async (flag) => {
	switch (index.value) {
		case 0:
			index.value++
			break;
		case 1:
			if (jobNumberList.value[jobNumberIndex.value]) {
				index.value++
				// 获取工号下已办理的手机号列表
				const { data } = await getSubmitHistory({
					operator: operatorList.value[operatorIndex.value],
					workCode: jobNumberList.value[jobNumberIndex.value]?.value
				})
				phoneList.value = data
				if (flag === true) {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
				}
			} else {
				uni.showToast({
					title: '请选择工号',
					icon: 'error'
				})
			}
			break;
		case 2:
			formData.value.operator = operatorList.value[operatorIndex.value]
			formData.value.workCode = jobNumberList.value[jobNumberIndex.value]?.value
			index.value++
			break;
		case 3:
			formRef.value.validate().then(res => {
				addOrder(res).then(res => {
					index.value = 1
					goNext(true)
					// 姓名手机号清空
					formData.value.name = ''
					formData.value.phone = ''
				})
			}).catch(err => {
				console.log(err, 'err');
			})
			break;
		default:
			break;
	}
}
const handleDelete = (item) => {
	removeSubmitHistory({
		id: item.id
	}).then(() => {
		uni.showToast({
			title: '删除成功',
			icon: 'success',
			success: setTimeout(() => {
				// 获取工号下已办理的手机号列表
				getSubmitHistory({
					operator: operatorList.value[operatorIndex.value],
					workCode: jobNumberList.value[jobNumberIndex.value]?.value
				}).then(res => {
					phoneList.value = res.data
				})
			}, 1000)
		})
	})
}
</script>

<style lang="scss" scoped>
.btns {
	height: 100rpx;
	position: relative;

	.mini-btn {
		position: absolute;
		top: 0;
		right: 60rpx;
	}
}

.page-bg {
	max-height: 100vh;
	overflow: hidden;

	.title {
		height: 100rpx;
		margin: 40rpx 0;
		text-align: center;
		font-size: 40rpx;
		line-height: 100rpx;
	}

	.scroll {
		height: 700rpx;
		width: 700rpx;
		margin: 50rpx auto;
		overflow-y: auto;

		.scroll-item {
			width: 80%;
			height: 100rpx;
			background-color: #f7e9e9;
			margin: 40rpx auto;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&.active {
				color: #fff;
				background-color: $brand-theme-color;
			}
		}

		.scroll-item2 {
			width: 80%;
			height: 100rpx;
			background-color: #f7e9e9;
			margin: 40rpx auto;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.icon {
				position: absolute;
				right: 5%;
			}

			&.active {
				color: #fff;
				background-color: $brand-theme-color;
			}
		}
	}

	.form {
		width: 700rpx;
		height: 700rpx;
		margin: 0 auto;
		padding: 40rpx;
		box-sizing: border-box;
		box-shadow: 0 8rpx 10rpx 1rpx rgba(0, 0, 0, 0.11);
		border-radius: 39rpx 39rpx 39rpx 39rpx;
		margin-bottom: 50rpx;

		.bottm {
			text-align: right;
		}
	}

	.buttons {
		display: flex;

		button {
			background-color: $brand-theme-color;
			color: #fff;
			transition: all 1s;
		}
	}

	.step {
		margin-top: 30rpx;
	}
}

.register-input {
	border-bottom: solid 2rpx $uni-border-color;

	:deep(.is-disabled) {
		color: #000;
	}
}

.register-input.active {
	border-bottom: solid 4rpx $brand-theme-color !important;
}

.register-box {
	display: flex;

	.box {
		width: 136rpx;
		height: 70rpx;
		border-radius: 20rpx;
		background-color: #f6eaea;
		display: flex;
		align-items: center;
		justify-content: center;

		&:last-child {
			margin-left: 50rpx;
		}
	}

	.active {
		background-color: $brand-theme-color;
		color: #fff;
	}
}

// 美化滚动条
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	width: 6px;
	background: #eee;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

::-webkit-scrollbar-thumb {
	background-color: $brand-theme-color;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	transition: background-color .3s;
	cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
	background-color: $brand-theme-color;
	opacity: 0.3;
}
</style>
